<template>
  <el-container class="realms-info-root-lay" style="margin: 0;padding: 0;">
    <RealmsTop ref="rlmTop"
               :recentLabel="recentLabel"
               :recentEntities="recentRealms"
               :entity="currentRealms"
               @returnPrevView="onReturnRealmList"
               @realmsDetail="onRealmsDetail"/>
    <el-container style="height: 100%; flex: 1;overflow: hidden;">
      <LeftMenu ref="headerRef"
                :menus="menus" :title="currentRealms?.label"
                :name="'realm'" @navMenuChanged="onRealmsMenuChanged"/>
      <el-main style="margin: 0;padding: 0;overflow: hidden;">
        <RouteView />
      </el-main>
    </el-container>
  </el-container>
<!--  <div style="display: flex; flex-direction: column; height: 100%; color: #C7C8CA; overflow: hidden;">-->
<!--    <RealmsTop ref="rlmTop"-->
<!--               :recentLabel="recentLabel"-->
<!--               :recentEntities="recentRealms"-->
<!--               :entity="currentRealms"-->
<!--               @returnPrevView="onReturnRealmList"-->
<!--               @realmsDetail="onRealmsDetail"/>-->
<!--    <div style="flex: 1; display: flex; flex-direction: row;">-->
<!--      <LeftMenu style="height: 100%;" ref="headerRef"-->
<!--                :menus="menus" :title="currentRealms?.label"-->
<!--                :name="'realm'" @navMenuChanged="onRealmsMenuChanged"/>-->
<!--      <RouteView style="flex: 1;" />-->
<!--    </div>-->
<!--  </div>-->
</template>

<script setup lang="ts" name="realm">

import {computed, effect, nextTick, onActivated, onDeactivated, onMounted, ref, shallowRef} from "vue";

import router from "@/router";
import {useStore} from "@/stores";
import LeftMenu from "@/components/common/LeftMenu.vue";
import RouteView from "@/components/common/RouteWrap.vue";
import RealmsTop from "@/components/realms/RealmsTop.vue";
import {useActiveMenu} from "@/utils/UseActiveMenu";

const store = useStore();
const recentLabel = shallowRef("最近领域: ");
const headerRef = shallowRef(null);
const menus = ref<MenuType[]>(useStore().getSubMenus('/realm') || []);
const rlmTop = ref(null);
const rootPath = ref();

const {updateActiveMenu} = useActiveMenu('realm');

const recentRealms = computed(() => {
  return store.$state.recentRealms || [];
})

// const recentRealms = ref([
//   {id: '2', label: '商城用户', desc: '商城用户'},
//   {id: '3', label: '考勤用户', desc: '考勤用户'},
// ])

const currentRealmsPath = computed(() => {
  return store.$state.realmsPath;
})

const initRoute = () => {
  const routePath: string = router.currentRoute.value.path || '';
  if (menus.value && menus.value.length !== 0) {
    const currPath = currentRealmsPath.value ? currentRealmsPath.value : menus.value[0].routePath;
    if (currPath && currPath !== routePath) {
      store.$state.realmsPath = currPath;
      const routePath = currPath.replace(':id*', '');
      router.push({
        path: routePath
      })
      nextTick(() => updateActiveMenu(routePath))
    }
  }
}

effect(() => {
  rootPath.value = {
    id: router.currentRoute.value.path,
    name: router.currentRoute.value.name,
  }
})

const currentRealms = computed(() => {
  return store.$state.realms ? store.$state.realms : {};
});

const onReturnRealmList = () => {
  store.$state.listRealms = true;
  router.push({path: '/realm-list'})
}

const onRealmsMenuChanged = (path: string) => {
  store.$state.realmsPath = path;
}

const onRealmsDetail = () => {

}

onMounted(() => {

})

onActivated(() => {
  initRoute();
})

onDeactivated(() => {

})

</script>

<style scoped>
.realms-info-root-lay {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  color: #C7C8CA;
  overflow: hidden;
}

el-button {
  color: #C7C8CA;
}

el-form-item {
  color: #C7C8CA;
}

</style>
